<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-10-27 17:08:15
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-11-17 14:51:53
 * @FilePath: \v2.0.0\src\views\inspection\exception-log.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { getByRidAndType } from "@/api/inspection/exception-log";
import { ref, onActivated } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const tableData = ref([]);

async function getData() {
  const { data } = await getByRidAndType({
    rid: route.query.id,
    rtype: route.query.rType,
    limit: 100,
  });
  tableData.value = data;
}
getData();

const mapType = { 0: "待处理", 1: "已处理", 2: "误报" };
const column = [
  { prop: "rid", label: "机器人编码" },
  { prop: "message", label: "警报内容" },
  { prop: "createTime", label: "警报时间" },
  {
    prop: "status",
    label: "处理进度",
    formatter(row) {
      return mapType[row.status];
    },
  },
];

onActivated(() => {
  getData();
});
</script>

<template>
  <el-table
    class="h-full rounded bg-[#162331] border-0"
    size="large"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      v-for="item in column"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :formatter="item.formatter"
    />
    <el-table-column label="操作" width="240px">
      <el-button type="primary">立即处理</el-button>
      <el-button type="danger">关闭警报</el-button>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

:deep(th.el-table__cell) {
  background-color: #162331;
  color: #85939d;
}

:deep(.el-table__cell) {
  background-color: #162331;
  color: white;
}

:deep(td.el-table__cell),
:deep(th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

:deep(tr:hover > td) {
  background-color: #162331 !important;
}
</style>
